<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    title="生长周期选择列表"
    width="1000px"
    @ok="handleSubmit"
    destroyOnClose="true"
    :canFullscreen="false"
  >
    <a-form :model="formModel">
      <a-row>
        <a-col :span="12">
          <a-form-item label="名称" name="name" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
            <a-input v-model:value="formModel.name" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="种类" name="category" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
            <JTreeSelect
              v-model:value="formModel.category"
              dict="t_classification,name,id"
              pidField="pid"
              pidValue="1690901276535795713"
              hasChildField="has_child"
              placeholder="请选择种类"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <BasicTable @register="registerTable" :rowSelection="rowSelection" style="padding: 0px">

      <template #proportion="{text}">
        <div >
          <span>{{ text.proportion }}</span>
          <span>({{ text.proportion * 100 }}%)</span>
        </div>
      </template>
    </BasicTable>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, unref, toRaw, reactive, watchEffect, watch } from 'vue';
  import { BasicModal, useModalInner } from '/src/components/Modal';
  import { BasicTable, useTable } from '/src/components/Table';
  import { columns, searchFormSchema } from '../../TGrowthcycleList/TGrowthcycle.data';
  import { listNoConcat } from './ProductGrowthcycle.api';

  import { useDebounceFn } from '@vueuse/core';
  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
  import JTreeSelect from '/@/components/Form/src/jeecg/components/JTreeSelect.vue';
  // 声明Emits
  const emit = defineEmits(['select', 'register']);
  const checkedKeys = ref<Array<string | number>>([]);
  const productNo = ref('');

  // Form model
  let formModel = reactive({
    name: '',
    category: '',
    productNo: productNo.value,
  });

  //注册table数据
  const [registerTable, { reload, setProps }] = useTable({
    api: listNoConcat,
    rowKey: 'id',
    columns: columns,
    formConfig: {
      labelWidth: 60,
      schemas: searchFormSchema,
      baseRowStyle: { maxHeight: '20px' },
      autoSubmitOnEnter: true,
    },
    useSearchForm: false,
    striped: true,
    showTableSetting: false,
    bordered: true,
    showIndexColumn: false,
    canResize: false,
  });

  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    // 重置 formModel
    formModel.name = '';
    formModel.category = '';
    checkedKeys.value = [];
    productNo.value = data.no;
    formModel.productNo = productNo.value;
    setProps({ searchInfo: formModel });
    reload();
  });

  /**
   * 选择列配置
   */
  const rowSelection = {
    type: 'checkbox',
    columnWidth: 50,
    selectedRowKeys: checkedKeys,
    onChange: onSelectChange,
  };
  /**
   * 选择事件
   */
  function onSelectChange(selectedRowKeys: (string | number)[]) {
    checkedKeys.value = selectedRowKeys;
  }
  let timeout;
  // 观察表单模型变化

  watch(
    formModel,
    () => {
      if (timeout) clearTimeout(timeout);

      timeout = setTimeout(() => {
        console.log('formModel changed', formModel.value);
        // 在这里调用你的方法，例如reload()
        reload();
      }, 300); // 300毫秒后触发
    },
    { deep: true }
  );

  //提交事件
  function handleSubmit() {
    setModalProps({ confirmLoading: true });
    //关闭弹窗
    closeModal();
    //刷新列表
    emit('select', toRaw(unref(checkedKeys)));
    setModalProps({ confirmLoading: false });
  }
</script>
